import { onMounted } from "vue";
export default function (width:number) {
    onMounted(() => {
        const el: any = document.getElementById('title')
        // 通过判断getContext方法是否存在来判断浏览器的支持性
        if (el.getContext) {
            //文字设置
            const canvas = el.getContext('2d')
            canvas.font = "100px Britannic"
            canvas.textBaseline = 'middle'
            canvas.textAlign = 'center'
            drawText('|')       //启动时先画上

            let redrawTime = 0  //竖线重复次数
            let hide = true    //竖线是否被隐藏

            redraw(false)

            function continueDraw() {
                drawText('B|')
                setTimeout(() => {
                    drawText('Be|')
                }, 300)
                setTimeout(() => {
                    drawText("Bea|")
                }, 400)
                setTimeout(() => {
                    drawText("Bear|")
                }, 500)
                setTimeout(() => {
                    drawText("Bear's|")
                }, 700)
                setTimeout(() => {
                    drawText("Bear's |")
                }, 800)
                setTimeout(() => {
                    drawText("Bear's H|")
                }, 900)
                setTimeout(() => {
                    drawText("Bear's Ho|")
                }, 1000)
                setTimeout(() => {
                    drawText("Bear's Hom|")
                }, 1300)
                setTimeout(() => {
                    drawText("Bear's Home|")
                }, 1550)
                setTimeout(() => {
                    drawText("Bear's Home!|")
                }, 2500)
                setTimeout(() => {
                    drawText("Bear's Home|")
                }, 3500)
                setTimeout(() => {
                    drawText("Bear's Home-|")
                }, 4000)
                setTimeout(() => {
                    drawText("Bear's| Home-")
                }, 4500)
                setTimeout(() => {
                    drawText("|Bear's Home-")
                }, 5000)
                setTimeout(() => {
                    drawText("|-Bear's Home-")
                }, 5500)
                setTimeout(() => {
                    drawText("-Bear's Home- |")
                }, 6500)
                setTimeout(() => {
                    redraw(true)        //结束绘制
                }, 6500);
            }
            function redraw(finished: boolean) {        //重绘图形
                let timer = setInterval(() => {

                    hide = !hide    //切换隐藏状态

                    canvas.clearRect(0, 0, 800, 200)//清除画布，方便后面画入
                    if (finished) {   //若这是结束后的，则走这里
                        if (hide) { //若被隐藏，则填充
                            drawText("-Bear's Home-")
                        } else {    //若未隐藏，则隐藏
                            drawText("Bear's Home")
                        }
                    } else if (!finished && redrawTime <= 3) { //当没有结束且重复次数大于4时，结束闪烁，开始写入标题
                        if (hide) { //若被隐藏，则填充
                            drawText("|")
                        }
                        redrawTime++
                    } else {             //结束，开始码入
                        clearInterval(timer)
                        continueDraw()
                    }
                }, 1000)
            }

            function drawText(text:string){         //绘制函数
                
                canvas.clearRect(0, 0, width, 200)
                canvas.strokeStyle = 'rgb(255, 255, 255)'
                canvas.strokeText(text,width/2,100)
                canvas.fillStyle = 'rgba(255, 255, 255, 0.5)'
                canvas.fillText(text, width/2, 100)
            }
        }
    })
}